<template>
    <div class="vm-image-list">
        <el-row class="image-list" :gutter="12">
            <el-col :lg="8" :sm="1" class="vm-margin" v-for="item in dataShow" :key="item.id">
                <VmCard :editable="true" :title="item.title" :img="item.url" :desc="item.desc"
                        :detailUrl="item.detailUrl" :editUrl="item.editUrl" :sysGroupId="item.sysGroupId" :id="item.id" ></VmCard>
            </el-col>

        </el-row>
    </div>
</template>

<script>
    import VmCard from './imgRec/vm-card.vue'

    export default {
        name: 'VmImageList',
        components: {
            VmCard
        },
        props: {
            title: {
                type: String,
                default: 'Image List'
            },
            // origin data
            data: {
                type: Array,
                default: function () {
                    return [
                        {
                            id: '19920805',
                            title: 'Title',
                            img: require('../assets/img/img-1.jpg'),
                            desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s ly dummy tly dummy tly dummy tly dummy tly dummy tly dummy t',
                            to: '#'
                        }
                    ]
                }
            }

        },
        data: function () {
            return {
                keyword: '', // keyword for search
                dataShow: [], // data for showing
                showNum: 4, // number of item per page
                currentPage: 1
            }
        },
        methods: {
            updateDataShow: function () {
                let startPage = (this.currentPage - 1) * this.showNum
                let endPage = startPage + this.showNum
                this.dataShow = this.data.slice(startPage, endPage)
            },
            pageChange: function (page) {
                this.currentPage = page
                this.updateDataShow()
            },
            profile() {
                alert("hi");
            },
            search: function () {
                let that = this
                let tempData = that.data
                that.dataShow = []
                tempData.forEach(function (elem) {
                    for (let i in elem) {
                        if (elem[i].toString().indexOf(that.keyword) > -1) {
                            that.dataShow.push(elem)
                            return
                        }
                    }
                })
            },
            deleteOk: function (data) {
                this.$emit('delete-ok', data)
            }
        },
        watch: {
            data: function () {
                this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
            }
        },
        mounted: function () {
            this.dataShow = this.data;
            this.msg=this.message;
            console.log(this.message)
        }
    }
</script>
